<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../vue.js"></script>
		<!-- https://cn.vuejs.org/v2/guide/events.html -->
		<title>事件处理</title>
	</head>
	<body>
		<div id="vm1">
			<p>{{message}}</p>

			<!-- 监听事件 -->
			<button v-on:click="counter += 1">
				数值：{{counter}}
			</button>
			<p>{{counter}}</p>

			<!-- 
			 事件处理方法
			 然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
			 -->
			 
			<!-- <div v-on:click="greet('新消息',$event)"> 点击 Greet
				 <a href="http://www.baidu.com" target="_blank"></a>  
			 </div> -->

			<button v-on:click="greet('新消息',$event)">Greet</button>
			
			<!-- 添加事件监听器时使用事件捕获模式 -->
			<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
			<div v-on:click.capture="doThis">执行doThis事件</div>
			
			<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
			<!-- 即事件不是从内部元素触发的 -->
			<div v-on:click.self="doThat">执行doThat事件</div>

		</div>

		<script>
			var data = {
				message: '事件处理',
				seen: true, // false
				url: 'https://cn.vuejs.org/v2/guide/list.html',
				isActive: true,
				isGreen: true,
				color: '#FF0000',
				size: '50px',
				type: 'C',
				isShow: true,
				numbers: [1, 2, 3, 4, 5, 6],
				counter: 0
			}

			var vm1 = new Vue({
				el: '#vm1',
				data: data,
				methods: {
					greet: function(str, event) {
						if (event) {
							// event.preventDefault()
							// event.stopPropagation()
						}

						// return false 暴力阻止 

						alert(str)
						// alert(this.message)// 可以访问data 里的属性
						console.log('当前事件名称：' + event)
					},
					doThis:function(){
						console.log('当前执行事件名称: doThis')
					},
					
					doThat:function(){
						console.log('当前执行事件名称: doThat')
					},
				}
			})
		</script>
	</body>
</html>